// 亮色模式下的主题色
:root {
  --mao-background-color: aliceblue;
  // 留言板说明背景
  --mao-bg-message: #f5f5f5;
  // 分类列表背景
  --mao-bg-category: linear-gradient(135deg, #f54ea2, #ff7676);
  // 首页波浪
  --mao-bg-wave01: rgba(240, 248, 255, 0.7);
  --mao-bg-wave02: rgba(240, 248, 255, 0.5);
  --mao-bg-wave03: rgba(240, 248, 255, 0.3);
  --mao-bg-wave04: rgba(240, 248, 255, 1);
  // footer
  --mao-bg-footer: linear-gradient(135deg, #f6ceec, #d939cd);
  // chatgpt模块
  --mao-bg-right: #dbe4ff;
  --mao-bg-left: #eebefa;
  --mao-bg-left-card: #eebefa;
  // 评论框背景
  --mao-bg-comment: #f2f2f3;
  // 回复用户名
  --mao-bg-reply: rgba(245, 108, 108, 0.7);
  // 文章页面右下角滚动进度背景色
  --mao-scroll-percentage-bg: #ffffff;
  // 文章页面底部滚动进度条背景色
  --mao-scroll-percentage-bar: linear-gradient(135deg, #17ead9, #6078ea);
  // 设置模块背景阴影
  --mao-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  // 滚动条滑块颜色
  --color-pink-light: #FFC0CB; /* 定义亮色主题下的滚动条颜色 */

  // 音乐播放器变量
  --primary: #5cbfef;
  --router-color: #dddddd;
  --font-color: #676767;
  --dark-font-color: #a7a7a7;
  --second-font-color: #b3b7ff;
  --hot-color: #f00;
  --md-active: #409eff;
  --global-white: #fff;
  --global-black: #000;
  --global-shadow-white: #fafafa;
  --header-bg-color: #8a7e90;
  --meta-color: #858585;
  --comment-grey: #a4a4a4;
  --border-color: #7ec4f2;
  --hr-border: #a9d5f4;
  --top: #f26c60;
  --error: #f56c6c;
  --music-main-active: #62c28a;
  --music-main-bg: #101827;
  --shadow-mask-bg: rgba(0, 0, 0, 0.5);
  --shadow-button-bg: rgba(255, 255, 255, 0.5);
  --global-font-size: 14px;
  --card-box-shadow: 0 3px 6px 3px rgba(7, 17, 27, 0.06);
  --card-hover-box-shadow: 0 3px 6px 3px rgba(7, 17, 27, 0.15);
}

// 暗色模式下的主题色
html.dark {
  --mao-background-color: #424242;
  --mao-bg-message: #212121;
  --mao-bg-category: linear-gradient(135deg, #000c40, #607d8b);
  --mao-bg-wave01: rgba(70, 70, 70, 0.7);
  --mao-bg-wave02: rgba(70, 70, 70, 0.5);
  --mao-bg-wave03: rgba(70, 70, 70, 0.3);
  --mao-bg-wave04: rgba(70, 70, 70, 1);
  --mao-bg-footer: linear-gradient(135deg, #000c40, #607d8b);
  --mao-bg-right: #292d3dff;
  --mao-bg-left: #52305e;
  --mao-bg-left-card: #714e79;
  --mao-bg-comment: #a8a8b7;
  --mao-bg-reply: rgba(0, 0, 0, 0.7);
  --mao-scroll-percentage-bg: #18222c;
  --mao-scroll-percentage-bar: linear-gradient(135deg, #5b247a, #1bcedf);
  // 滚动条滑块颜色
  --color-green-light: #322d31; /* 定义暗色主题下的滚动条颜色 */

  // 音乐播放器变量
  --global-white: #424242;
  --global-shadow-white: #1d1d1d;
  --mao-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
}

// 全局字体
body {
  /* 将 body 元素或者任何其他你想要应用该字体的元素设置为 '阿里妈妈方圆体 VF Regular' */
  font-family: "阿里妈妈方圆体 VF Regular", sans-serif;
  /* 当自定义字体尚未加载时提供一个备选字体（在这个例子中是无衬线字体） */
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-track {
  border-radius: 2em;
}

/* 亮色滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #26c6da; /* 滑块悬停时的颜色 */
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-pink-light);
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

/* 暗色模式下的滚动条 */
html.dark ::-webkit-scrollbar-thumb {
  background-color: var(--color-green-light);
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

/* 当html元素为dark模式时，设置滚动条滚动时的颜色 */
html.dark ::-webkit-scrollbar-thumb:hover {
  /* 使用线性渐变设置滚动条的颜色 */
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.5) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.5) 0,
    hsla(0, 0%, 100%, 0.5) 75%,
    transparent 0,
    transparent
  );
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* 加载进度条 */
#nprogress .bar {
  background: var(--primary-color) !important;
}
